<template>
  <div>
    <van-nav-bar left-text="返回"> </van-nav-bar>
    <div class="F2">
      <h3>味多美</h3>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        title-style="font-size:12px;
          color:#D83411;"
        title="满减优惠"
      >
        <div class="neirong">内容</div>
      </van-collapse-item>
    </van-collapse>
    <van-tabs v-model="active">
      <van-tab title-style="font-size:16px" title="点单">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="法式月饼" />
          <van-sidebar-item title="新品尝鲜" />
          <van-sidebar-item title="现烤面包" />
          <van-sidebar-item title="人气产品" />
          <van-sidebar-item title="蛋糕" />
          <van-sidebar-item title="吐司面包" />
          <van-sidebar-item title="甜品西点" />
          <van-sidebar-item title="曲奇饼干" />
          <van-sidebar-item title="果汁饮料" />
        </van-sidebar>
      </van-tab>
      <van-tab title-style="font-size:16px" title="商家">内容</van-tab>
      <van-tab disabled>内容 2</van-tab>
      <van-tab disabled>内容 2</van-tab>
      <van-tab disabled>内容 2</van-tab>
    </van-tabs>
    <!-- 底部 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img
          v-if="selected == 'home'"
          src="@/assets/common/001.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/002.png" alt="" slot="icon" />
        首页</mt-tab-item
      >
      <mt-tab-item id="liebiao">
        <img
          v-if="selected == 'liebiao'"
          src="@/assets/common/003.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/004.png" alt="" slot="icon" />
        分类</mt-tab-item
      >
      <mt-tab-item id="shop">
        <img
          v-if="selected == 'shop'"
          src="@/assets/common/005.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/009.png" alt="" slot="icon" />
        购物车</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="@/assets/common/010.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/008.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeKey: 0,
      active: 5,
      activeNames: ["1"],
      selected: "liebiao",
    };
  },
  watch: {
    // 监听底部选项卡
    selected(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "home") {
        this.selected = "liebiao";
        this.$router.push("/");
      } else if (newValue == "shop") {
        this.selected = "liebiao";
        this.$router.push("/shop");
      } else if (newValue == "me") {
        this.selected = "liebiao";
        this.$router.push("/me");
      }
    },
  },
};
</script>

<style scoped>
.F2 {
  margin-top: -20px;
}
.F2 > h3 {
  font-size: 20px;
}
.van-nav-bar {
  background-color: #efcccc;
}
.neirong {
  height: 500px;
}

.van-sidebar-item--select {
  color: red;
}
.van-sidebar-item--select::before {
  background-clip: #fff;
}
</style>
